<!-- header -->
<?php echo $this->element('landing/header'); ?>
<!-- / header -->
<section id="content">
    <div class="bg-primary dk">
        <div class="text-center wrapper">
            <div class="m-t-xl m-b-xl">
                <div class="text-uc h1 font-bold inline">
                    <div class="carousel slide carousel-fade inline auto aside text-left pull-left pull-none-xs" data-interval="2000">
                        <div class="carousel-inner">
                            <div class="item active text-warning">
                                Online
                            </div>
                            <div class="item text-dark">
                                Secure
                            </div>
                            <div class="item">
                                Faster
                            </div>
                        </div>
                    </div>
                    <div class="pull-left m-r-sm text-white">Payment Platform <span class="font-thin text-muted">Built</span></div>
                </div>
                <div class="h4 text-muted m-t-sm">For College Tuition Management  </div>
            </div>
           <!-- <p class="text-center m-b-xl">
                <a href="http://themeforest.net/user/Flatfull/portfolio?ref=flatfull" target="_blank" class="btn btn-lg btn-dark m-sm">Download it</a>
                <a href="index.html" target="_blank" class="btn btn-lg btn-warning b-white bg-empty m-sm">Live Preview</a>
            </p>-->
        </div>
        <div class="padder">
            <div class="hbox">
                <aside class="col-md-3 v-bottom text-right">
                    <div class="hidden-sm hidden-xs">
                        <section class="panel bg-dark inline m-b-n-lg m-r-n-lg aside-sm no-border device phone animated fadeInLeftBig">
                            <header class="panel-heading text-center">
                                <i class="fa fa-minus fa-2x m-b-n-xs block"></i>
                            </header>
                            <div>
                                <div class="m-l-xs m-r-xs">
                                    <?php echo $this->Html->image('phone-2.png',array('class'=>'img-full')); ?>
                                </div>
                            </div>
                        </section>
                    </div>
                </aside>
                <aside class="col-sm-10 col-md-6">
                    <section class="panel bg-dark m-b-n-lg no-border device animated fadeInUp">
                        <header class="panel-heading text-left">
                            <i class="fa fa-circle fa-fw"></i>
                            <i class="fa fa-circle fa-fw"></i>
                            <i class="fa fa-circle fa-fw"></i>
                        </header>
                        <?php echo $this->Html->image('main.png',array('class'=>'img-full')); ?>
                    </section>
                </aside>
                <aside class="col-md-3 v-bottom">
                    <div class="hidden-sm hidden-xs">
                        <section class="panel bg-light m-b-n-lg m-l-n-lg aside no-border device phone animated fadeInRightBig">
                            <header class="panel-heading text-center">
                                <i class="fa fa-minus fa-2x text-white m-b-n-xs block"></i>
                            </header>
                            <div class="">
                                <div class="m-l-xs m-r-xs">
                                    <?php echo $this->Html->image('phone-1.png',array('class'=>'img-full')); ?>
                                </div>
                            </div>
                        </section>
                    </div>
                </aside>
            </div>
        </div>
      <!--  <div class="dker pos-rlt">
            <div class="container wrapper">
                <div class="m-t-lg m-b-lg text-center">
                    UPSA Pay For your faster and easier College Payment Platform.
                </div>
            </div>
        </div>-->
    </div>
   <!-- <div id="about">
        <div class="container">
            <div class="m-t-xl m-b-xl text-center wrapper">
                <h3>Responsive web application and admin dashboard template</h3>
                <p class="text-muted">This web based app template give you much power to build your great application.</p>
            </div>
            <div class="row m-t-xl m-b-xl text-center">
                <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
                    <p class="h3 m-b-lg">
                        <i class="fa fa-lightbulb-o fa-3x text-info"></i>
                    </p>
                    <div class="">
                        <h4 class="m-t-none">Web Application</h4>
                        <p class="text-muted m-t-lg">Many mobile app widgets and components, it's fully responsive, it can run on all the size of the screens. Start work on your great idea today!</p>
                    </div>
                </div>
                <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="600">
                    <p class="h3 m-b-lg">
                        <i class="fa fa-signal fa-3x text-info"></i>
                    </p>
                    <div class="">
                        <h4 class="m-t-none">Admin Dashboard</h4>
                        <p class="text-muted m-t-lg">It also can be used as admin dashboard, it has tables, charts and other useful components for system management, graph data shows and analysis.</p>
                    </div>
                </div>
                <div class="col-sm-4" data-ride="animated" data-animation="fadeInLeft" data-delay="900">
                    <p class="h3 m-b-lg">
                        <i class="fa fa-rocket fa-3x text-info"></i>
                    </p>
                    <div class="">
                        <h4 class="m-t-none">App Landing</h4>
                        <p class="text-muted m-t-lg">This template also have a front end site that for your application landing, It have the features introduction, blog section, and a price table included.</p>
                    </div>
                </div>
            </div>
            <div class="m-t-xl m-b-xl text-center wrapper">
                <p class="h5">You can use it to build your
                    <span class="text-primary">Content manage system</span>,
                    <span class="text-primary">Travel app</span>,
                    <span class="text-primary">Medical app</span>...
                </p>
            </div>
        </div>
    </div>-->
    <div id="responsive" class="bg-dark">
        <div class="text-center">
            <div class="container">
                <div class="m-t-xl m-b-xl wrapper">
                    <h3 class="text-white">UPSA Pay will works no matter where you are</h3>
                    <p>You can use your application at anywhere in the country. <br>This application works on <span class="text-primary text-ul">mobile device</span> too.</p>
                </div>
                <div class="row m-t-xl m-b-xl">
                    <div class="col-sm-4 wrapper-xl" data-ride="animated" data-animation="fadeInLeft" data-delay="300">
                        <p class="text-center h2 m-b-lg m-t-lg">
                <span class="fa-stack fa-2x">
                  <i class="fa fa-circle fa-stack-2x text-dark"></i>
                  <i class="fa fa-mobile fa-stack-1x text-muted"></i>
                </span>
                        </p>
                        <p>Mobile</p>
                    </div>
                    <div class="col-sm-4 wrapper-xl" data-ride="animated" data-animation="fadeInLeft" data-delay="600">
                        <p class="text-center h1 m-b-lg">
                <span class="fa-stack fa-2x">
                  <i class="fa fa-circle fa-stack-2x text-dark"></i>
                  <i class="fa fa-tablet fa-stack-1x text-muted"></i>
                </span>
                        </p>
                        <p>Tablet</p>
                    </div>
                    <div class="col-sm-4 wrapper-xl" data-ride="animated" data-animation="fadeInLeft" data-delay="900">
                        <p class="text-center h2 m-b-lg m-t-lg">
                <span class="fa-stack fa-2x">
                  <i class="fa fa-circle fa-stack-2x text-dark"></i>
                  <i class="fa fa-desktop fa-stack-1x text-muted text-md"></i>
                </span>
                        </p>
                        <p>Desktop</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <!-- <div id="newsletter" class="bg-white clearfix wrapper-lg">
        <div class="container text-center m-t-xl m-b-xl" data-ride="animated" data-animation="fadeIn">
            <h2>Newsletter</h2>
            <p>Do not want to miss anything? Subscribe to our newsletter box</p>
            <form class="form-inline m-t-xl m-b-xl">
                <div class="form-group">
                    <input class="form-control input-lg" placeholder="Your email" data-ride="animated" data-animation="fadeInLeftBig" data-delay="300">
                </div>
                <button type="submit" class="btn btn-default btn-lg" data-ride="animated" data-animation="fadeInRightBig" data-delay="600">Subscribe</button>
            </form>
        </div>
    </div>-->
</section>

<!-- footer -->
<?php echo $this->element('landing/footer'); ?>